<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{overflow: hidden;}
        .box{width:250px;border: solid 1px black;float: left;text-align: center;}
        .box .img{width:90%;height:220px;}
        .box .name{line-height:20px;height:40px;overflow: hidden;}
        .box .price{font-size: 20px;color: red;font-weight:bold;}
        .box .addCart{margin-bottom: 20px;}
    </style>
</head>
<body>
    <h2>这是商品列表</h2>
    <a href="./11购物车.html">去结算</a>
    <div class="cont">
    </div>
</body>
<script src="./ajax.js"></script>
<script>

    

    class List{
        constructor(){
            this.url = "http://localhost:3000/getGoods";
            this.cont = document.querySelector(".cont");
            this.getData();
            // 1. 绑定点击事件
            this.addEvent();
        }
        addEvent(){
            const that = this;
            this.cont.addEventListener("click", function(eve){
                const e = eve || window.event;
                const target = e.target || e.srcElement;
                if(target.className === "addCart"){
                    // 2. 获取当前点击加入购物车的商品id
                    that.id = target.getAttribute("goodsId");
                    // 获取商品价格
                    that.price = target.previousElementSibling.querySelector(".price").innerText;
                    // 3. 将获取到的id，数量，选中状态，价格存储到本地存储中
                    that.setLocalData();
                }
            })
        }
        setLocalData(){
            // [{id,num,check,price},{id,num,check,price}]
            // 4. 为了判断是否是第一次存，先读数据
            let goods = localStorage.getItem("goods")
            goods = goods ? JSON.parse(goods) : [];
            
            // 5. 直接判断，数组中是否存在本次要添加的数据
            let i = 0;
            const flag = goods.some((val,idx)=>{
                i = idx
                return val.id === this.id;
            })
            if(flag){
                // 6. 存在，数量+1
                goods[i].num++;
            }else{
                // 7. 不存在，添加新数据
                goods.push({
                    id:this.id,
                    num:1,
                    check:true,
                    price:this.price
                })
            }
            // 8. 将操作之后的数据，存入本地存储中
            localStorage.setItem("goods", JSON.stringify(goods));
        }
        getData(){
            ajax({
                url:this.url,
                data:{
                    num:20,
                    index:1
                }
            }).then(res=>{
                this.res = JSON.parse(res).data;
                this.render();
            })
        }
        render(){
            let str = "";
            this.res.forEach(val=>{
                str += `<div class="box">
                <img class="img" src="${val.goodsImg}" alt="">
                <p class="name">${val.goodsName}</p>
                <p>价格：<span class="price">${val.price}</span></p>
                <input type="button" value="加入购物车" goodsId="${val.goodsId}" class="addCart">
            </div>`
            })
            this.cont.innerHTML = str;
        }
    }

    new List;
    
</script>
</html>